<template>
  <div class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-full pl-4 pt-2 pb-2 overflow-auto"
    >
      <el-form-item label="关键词：" prop="keyword">
        <el-input
          v-model="form.keyword"
          placeholder="询价单号/备注等"
          clearable
          class="w-[180px]!"
        />
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-select
          v-model="form.status"
          placeholder="请选择状态"
          clearable
          class="w-[180px]!"
        >
          <el-option label="全部" value="" />
          <el-option label="待核实" :value="0" />
          <el-option label="已核实" :value="1" />
          <el-option label="已下单" :value="2" />
          <el-option label="已取消" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间：" prop="buyer_verify_create">
        <el-date-picker
          v-model="form.buyer_verify_create"
          type="daterange"
          class="w-[240px]!"
          unlink-panels
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :shortcuts="shortcuts"
        />
      </el-form-item>
      <el-form-item label="核实时间：" prop="seller_verify_create">
        <el-date-picker
          v-model="form.seller_verify_create"
          type="daterange"
          class="w-[240px]!"
          unlink-panels
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :shortcuts="shortcuts"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="onSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon('ep:refresh')" @click="resetForm">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <PureTableBar
      :columns="columns"
      :tableRef="tableRef"
      @fullscreen="onFullscreen"
      @refresh="resetForm"
    >
      <template v-if="loading && dataList.length === 0" #default>
        <el-skeleton :rows="12" animated />
      </template>
      <template #default="{ size, dynamicColumns }">
        <PureTable
          ref="tableRef"
          v-loading="loading"
          :columns="dynamicColumns"
          :data="dataList"
          :size="size"
          :pagination="pagination"
          @page-current-change="handlePageChange"
          @page-size-change="handleSizeChange"
          @selection-change="handleSelectionChange"
        >
          <template #verify_code="{ row }">
            <el-button
              type="primary"
              link
              @click="openDialog('期货询价', row.verify_code)"
            >
              {{ row.verify_code }}
            </el-button>
          </template>
          <template #product="{ row }">
            <div class="flex items-center">
              <div class="ml-2">
                <div class="text-sm">{{ row.product?.model_name }}</div>
                <div class="text-xs text-gray-400">
                  {{ row.product?.price }}
                </div>
              </div>
            </div>
          </template>
          <template #status="{ row }">
            <el-tag v-if="row.status === 0" type="danger">待核实</el-tag>
            <el-tag v-else-if="row.status === 1" type="primary">已核实</el-tag>
            <el-tag v-else-if="row.status === 2" type="success">已下单</el-tag>
            <el-tag v-else-if="row.status === 3" type="info">已取消</el-tag>
          </template>

          <!-- <template #price="{ row }">
            <el-tag type="warning">￥{{ row.product.price }}</el-tag>
          </template> -->
          <template #date="{ row }">
            <div>买家期望: {{ row.buyer_expected_date }}</div>
            <div>卖家确认: {{ row.seller_delivery_date }}</div>
          </template>
          <template #price="{ row }">
            <div>买家期望: ¥{{ row.buyer_expected_price }}</div>
            <div>卖家确认: ¥{{ row.seller_confirm_price }}</div>
            <div
              v-if="
                row.buyer_expected_price <= 0 && row.seller_confirm_price <= 0
              "
            >
              -
            </div>
          </template>
        </PureTable>
      </template>
    </PureTableBar>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { use } from "@/views/seller/trade/utill/futures";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { shortcuts } from "@/utils/datePicker";

defineOptions({
  name: "tradeSpotcheck"
});

const {
  form,
  loading,
  columns,
  pagination,
  dataList,
  multipleSelection,
  onSearch,
  resetForm,
  handlePageChange,
  handleSizeChange,
  openDialog,
  handleSelectionChange
} = use();

const formRef = ref();
const tableRef = ref();

function onFullscreen() {
  tableRef.value?.setAdaptive();
}
</script>

<style lang="scss" scoped>
.main {
  padding: 24px;
}

.search-form {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  align-items: end;

  :deep(.el-form-item) {
    margin-bottom: 0;
  }

  @media (max-width: 1400px) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (max-width: 992px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}
</style>
